<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px" height="1000px"><br><br><br>
      <div class="hezi"> <img src="./assets/logo.png" alt="" class="photo"></div>
      <br><br>
      <br><br><br>
      <el-icon> 
        <odometer />
      </el-icon>
      <router-link to="/first0" class="rute">仪表盘</router-link>
      <div class="demo-collapse">
          <el-collapse accordion class="b">
             <el-collapse-item name="1" class="a">
               <template #title>
                  <el-icon><grid/></el-icon>
                  常用设置
                  <el-icon class="header-icon"> 
                    <info-filled/>
                    </el-icon>
               </template>

      <div>
        <router-link to="/first1" class="rute">教师管理</router-link>
      </div>
      <br>

       <div>
        <router-link to="/first2" class="rute">学生管理</router-link>
      </div>
      
       <div><br>

        <router-link to="/first3" class="rute">公告管理</router-link>
      </div>
      <br>

       <div> <br>
        <router-link to="/first4" class="rute">系统配置</router-link>
      </div>
     

       <div> <br>
        <router-link to="/first5" class="rute">判断服务器</router-link>
      </div>
     
      </el-collapse-item>


      <el-collapse-item name="2">
      <template #title>
        <el-icon> <aim/></el-icon>
        问题
        <el-icon class="header-icon">
          <info-filled/>
        </el-icon>
      </template>
      
       <div>
        <router-link to="/first6" class="rute">问题列表</router-link>
      </div>
      <br>

       <div>
        <router-link to="/first7" class="rute">增加题目</router-link>
      </div>
       <div><br>
        <router-link to="/first8" class="rute">导入导出题目</router-link>
      </div>
      
      </el-collapse-item> 

      <el-collapse-item name="3">
        <template #title>
          <el-icon><trophy/></el-icon>
          🏆比赛&练习
          <el-icon class="header-icon">
            <info-filled/>
            </el-icon>
        </template>

      <div>
        <router-link to="/first9" class="rute">比赛列表</router-link>
      </div>
      
    <div><br>
        <router-link to="/first10" class="rute">创建比赛</router-link>
      </div>
      </el-collapse-item>
   <el-collapse-item name="4">
        <template #title>
          <el-icon><collection /></el-icon>
          课程<el-icon>
            <info-filled/>
            </el-icon>
        </template>

      <div>
        <router-link to="/first11" class="rute">课程列表</router-link>
      </div>
      <br>
    <div>
        <router-link to="/first12" class="rute">创建课程</router-link>
      </div>

      </el-collapse-item>
          </el-collapse>
      </div>
</el-aside>
    <el-container>
      <el-header class="colo1">
        <el-dropdown class="tubiao2">
          <span class="el-dropdown-link">
            username
            <el-icon class="el-icon-right">
              <arrow-down/>
            </el-icon>
          </span>
          <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>lagout</el-dropdown-item>
              </el-dropdown-menu>
          </template>
        </el-dropdown>

        <el-icon class="tubiao1"><share/></el-icon>
         <el-icon class="tubiao"><search/></el-icon>
      </el-header>
      <el-main class="colo2">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>标题</span>
            </div>
          </template>
          <router-view class="ll"></router-view>
          </el-card>
      </el-main>
      <el-footer class="colo3">footer</el-footer>
    </el-container>
    </el-container>
  </div>
</template>

<script>
import{Odometer,Grid,Aim,Collection,Search,Share,ArrowDown} from '@element-plus/icons-vue'
export default{
  name:'App',
  components:{
    Odometer,
    Grid,
    Aim,
    Collection,
    Search,
    Share,
    ArrowDown
  }
}
</script>
<style>

.rute{
  text-align: center;
  text-decoration: none;
}
.box-card{
  height: 400px;

}
.tubiao{
  float: right;
}
.tubiao1{
  float: right;
}
.tubiao2{
  float: right;
}
.demo-collapse{
height: 500px;
}
.hezi{
  display: flex;
  justify-content: center;
  align-items: center;
}
.photo{
  width: 60px;
  height: 60px;
}
.yanse{
  background-color:#F9FAFC;
}
.colo1{
 background-color:#EDECEC;
}
.colo2{
 background-color:#EDECEC;
}
.colo3{
 background-color:#EDECEC;
}
</style>